<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta charset="utf-8">
<title>Banking System</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link href="resources/signin/css/bootstrap.min.css" rel="stylesheet"
	type="text/css" />
<link href="resources/signin/css/bootstrap-responsive.min.css"
	rel="stylesheet" type="text/css" />

<link href="resources/signin/css/font-awesome.css" rel="stylesheet">
<link
	href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600"
	rel="stylesheet">

<link href="resources/signin/css/style.css" rel="stylesheet"
	type="text/css">
<link href="resources/signin/css/signin.css" rel="stylesheet"
	type="text/css">
<script type="text/javascript" src="resources/signin/js/signin.js"></script>
<script type="text/javascript"
	src="resources/signin/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
	src="resources/signin/js/bootstrap.min.js"></script>
<script type="text/javascript"
	src="resources/signin/js/jquery.validate.min.js"></script>
</head>

<style type="text/css">
label.error {
	font-weight: bold;
	color: red;
	padding: 2px 8px;
	margin-top: 2px;
}
</style>
 <body>

        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <h1 class="brand" style="font-style: italic;font-size: 40px;"> CSC Viet Nam eBanking </h1>		
                </div> <!-- /container -->
            </div> <!-- /navbar-inner -->
        </div> <!-- /navbar -->
        <div class="account-container">
            <div class="content clearfix">
            	<!-- Start Form login -->
                <form id="loginForm" action="j_spring_security_check" method="post" class="login active" autocomplete="off">						
                    <div class="login-fields">				
                    <spring:message code='lbl.language' /> <a href="login.html?lang=en">English</a>|<a
			href="login.html?lang=vn">Tiếng Việt</a>
                        <p style="color: black"><spring:message code='login.lbl.title' /></p>				
                        <div class="field">
                            <label for="username">Username:</label>
                            <input type="text"  id="j_username" name="j_username" value="" placeholder="<spring:message code='login.lbl.username' />" class="login username-field" autofocus/>
                        </div> <!-- /field -->				
                        <div class="field">
                            <label for="password">Password:</label>
                            <input type="password" id="j_password" name="j_password"  value="" placeholder="<spring:message code='login.lbl.password' />" class="login password-field"/>
                        </div> <!-- /password -->				
                    </div> <!-- /login-fields -->
                    <c:if test="${message != null}">
                   		<div class="alert alert-danger">
                   		 <p><spring:message code="err.login"/></p>
       					</div>
                    </c:if>
                    <div class="login-actions">
                        <button class="button btn btn-success btn-large" type="submit" style="background-color: grey;"><spring:message code='login.btn.sigin' /></button>
                    </div> <!-- .actions -->	
                    <div class="login-extra" style="color: black">
                        <spring:message code='login.lbl.forgot' /> <a href="resetpassword.html"><spring:message code='login.lbl.reset' /></a>
                    </div>
                </form>
               	<!-- End Form login -->
            </div> <!-- /content -->	
        </div>
    </body>
<script type="text/javascript">
	$(document).ready(
			function() {

				$('#loginForm').validate(
						{
							rules : {
								j_username : {
									required : true
								},
								j_password : {
									required : true
								}
							},
							messages : {
								j_username : {
									required : "What's your username?"
								},
								j_password : {
									required : "What's your password?"
								}
							},
							highlight : function(element) {
								$(element).closest('.field')
										.removeClass('success').addClass(
												'error');
							},
							success : function(element) {
								element.text('').addClass('valid').closest(
										'.field').removeClass('error')
										.addClass('success');
							}
						});

			});
</script>
</html>